<template>
  <div class="fu_wu_box">
    <div class="fu_wu_content">
      <div>
        <el-radio-group v-model="radioName">
          <el-radio-button label="全部建言"></el-radio-button>
          <el-radio-button label="科研设施"></el-radio-button>
          <el-radio-button label="仪器设备"></el-radio-button>
          <el-radio-button label="政策法规"></el-radio-button>
          <el-radio-button label="我要建言"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="form_box m-t" v-if="radioName=='我要建言'">
        <MyAdvice />
      </div>
      <div class="all" v-else>
        <ul class="ul">
          <li class="m-t" v-for="(item, index) in dataList" :key="index">
            <!-- <span class="iconClass el-icon-user-solid"></span> -->
            <div class="floor">
              <el-descriptions class="margin-top" :column="4" size="small" border>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-user"></i>
                    提问人
                  </template>
                  {{ item.name }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    提问类型
                  </template>
                  {{ item.type }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-location-outline"></i>
                    提问时间
                  </template>
                  {{ item.createdTime }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    <i class="el-icon-tickets"></i>
                    答复时间
                  </template>
                  {{ item.answerTime }}
                </el-descriptions-item>
              </el-descriptions>
              <div class="qa_q">
                <div class="list">
                  <span class="name">提问标题：</span><span class="text bold">{{ item.title }}</span>
                  <div style="clear: both;"></div>
                </div>
                <div class="list">
                  <span class="name">提问内容：</span><span class="text">{{item.content}}</span>
                  <div style="clear: both;"></div>
                </div>
                <div class="line_top"></div>
                <div class="list">
                  <span class="name">答复内容：</span><span class="text">{{item.replyContent}}</span>
                  <div style="clear: both;"></div>
                </div>
                <div class="list">
                  <span class="name">答复单位：</span><span class="text">{{item.unit}}</span>
                  <div style="clear: both;"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import suggestList from '@/suggestList.json'
import MyAdvice from './common/myAdvice.vue'
export default {
  components: { MyAdvice },
  data() {
    return {
      radioName: '全部建言',
      arrList: suggestList,
      dataList: []
    }
  },
  watch: {
    radioName(newValue) {
      if (newValue == '全部建言') {
        this.dataList = suggestList
      } else {
        this.dataList = this.arrList.filter(
          item => item.type.indexOf(newValue) > -1
        )
      }
    },
  },
  created() { this.dataList = suggestList },
  mounted() { },
  methods: {}
}
</script>

<style lang="less" scoped>
  .fu_wu_box {
    background: url('~@/assets/img/资料模板.png') no-repeat center;
    background-size: 100% 100%;
    padding: 30px 0;
    .item-box {
      display: flex;
      justify-content: space-between;
      .item {
        width: 100%;
        font-family: YouSheBiaoTiHei;
        font-size: 32px;
        color: #ffffff;
        text-align: left;
        font-style: normal;
        padding: 32px 60px;
        // background: url('~@/assets/img/服务咨询.png') no-repeat center;
        // background-size: 100% 100%;
      }
    }
    .fu_wu_content {
      background: #fff;
      width: 63%;
      margin: 0 auto;
      padding: 20px 20px 50px 20px;
    }
    ::v-deep(ul) {
      margin-top: 20px;
      li {
        .el-descriptions-item__label.is-bordered-label {
          color: #5272ec;
          font-weight: bold;
        }
        .iconClass {
          color: #5272ec;
          font-size: 30px;
          width: 46px;
          height: 46px;
          border-radius: 50%;
          background: #eaf4ff;
          text-align: center;
          line-height: 46px;
        }
        .qa_q {
          background-color: #fff;
          border: 1px solid #dcdfe6;
          border-top: none;
          padding: 10px 15px;
          .list {
            display: block;
            margin-bottom: 5px;
            .name {
              float: left;
              // width: 86px;
              display: block;
              font-size: 15px;
              color: #5272ec;
              line-height: 28px;
              font-weight: bold;
            }
            .text {
              display: block;
              float: left;
              width: 90%;
              font-size: 15px;
              line-height: 28px;
              &.bold {
                font-weight: bold;
              }
            }
          }
          .line_top {
            border-top: 1px dashed #5272ec;
            display: block;
            height: 10px;
            margin-top: 10px;
          }
        }
      }
    }
  }
</style>